/**
 * 公共hooks文件
 */
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 数据引入区
import React, { useEffect, useRef, useState, useLayoutEffect } from 'react'
import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux' // 引入redux的hook
import { AppDispatch, RootState } from '../store/store' // 引入封装好后的对应的ts类型判断

// 导出hooks区域
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
/**
 * @针对使用redux官方hook时ts类别报错的封装处理
 * @导出使用即可和原版没有区别的使用方法
 */
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

/**
 * @用户浏览页面时间hook
 * @pageName传入页面名称_选参
 */
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
export const useTimeOnPage = (pageName?: string) => {
  // 声明最近时间戳的 ref
  const starTime = useRef(null)
  useEffect(() => {
    // 获取最近的时间戳
    starTime.current = new Date().getTime()

    // 在组件销毁时执行结束浏览统计函数
    return userLookingTime
  }, [])

  // 结束浏览统计函数;
  const userLookingTime = () => {
    // 获取结束时的时间戳
    let endTime = new Date().getTime()
    console.log(endTime - starTime.current)
  }
}
